اکنون من برخی از اجزا را در اینجا آماده کردم
در پوشه layout
در پوشه Components که صفحات ما را می دهد،
یک طرح کلی و همچنین یک نوار ناوبری اصلی
که برخی از پیوندها را در خود نگه می دارد، برخی موارد فهرست را با پیوندها در خود جای می دهد.
ما فقط باید از آن استفاده کنیم.
اکنون این مؤلفه طرح‌بندی چنین ساخته شده است
که بتوانیم آن را دور اجزای دیگر بپیچیم
تا بتوانیم آن را در اطراف محتوای خود بپیچیم
که باید با آن طرح بندی قاب شود
به دلیل چیدمان، این کامپوننت از وسایل کودک استفاده می کند
برای گرفتن آنچه بین متن طرح بندی باز و بسته است
و این جزء را در اطراف آن محتوا بپیچید.
این بدان معناست که ما می توانیم برای مثال،
به صفحه شروع بروید،
بنابراین در NextJS و پوشه Pages،
و می‌توانیم لیست Meetup را با طرح‌بندی ببندیم.
حالا برای این، ما همچنین باید طرح بندی را وارد کنیم، البته.
بنابراین ما طرح‌بندی را از بالا رفتن وارد می‌کنیم،
اجزاء، چیدمان، چیدمان.
ما می توانیم این واردات را اضافه کنیم،
و یک بار این واردات اضافه شد
ما می توانیم طرح بندی را در اطراف لیست های ملاقات مانند این قرار دهیم.
و اگر این کار را انجام دهیم و این را ذخیره کنیم، با خطا مواجه می شویم
اون لینک تعریف نشده
اکنون این خطا را دریافت می کنیم زیرا
در آن جزء ناوبری اصلی،
من از مؤلفه پیوند استفاده می کنم
اما من آن را عمدا وارد نمی کنم
چون می خواستم این کار را دوباره با شما انجام دهم.
با این مؤلفه پیوند آشنا شدیم
و آن را از next/link وارد می کنیم.
و این به ما امکان می دهد آن پیوندها را ایجاد کنیم.
با این حال، دو پایه پس از آن باید تغییر کند
برای رفر کردن، زیرا مؤلفه پیوند ارائه شده است
توسط NextJS این سرپناه مرجع را می خواهد
جایی که مقصد آن لینک را تعریف می کنیم.
اما با این تغییر و با اضافه شدن واردات لینک،
اگر اکنون همه چیز را ذخیره کرده و دوباره بارگیری کنیم،
ما این نوار ناوبری زیبا را در بالای اینجا داریم
و ما یک حاشیه سفید در اطراف آن داریم
برای آن به سبک های جهانی خود بروید
و در اینجا در بدنه، حاشیه را روی صفر قرار دهید.
این چیزی است که برای شروع پروژه فراموش کردم.
اما اگر حاشیه صفر را به بدنه فایل CSS جهانی اضافه کنیم
سپس این مرز سفید از بین می رود،
و اکنون ما این قاب را در اینجا دریافت کردیم
و اکنون می‌توانیم برای رفتن روی همه ملاقات‌ها کلیک کنیم
به این صفحه آغازین بروید و روی افزودن جلسه جدید کلیک کنید
برای رفتن به این صفحه
البته ما در این صفحه هستیم
اگرچه هنوز طرح بندی را از دست داده ایم.
ما فقط آن را در صفحه شروع داریم.
اکنون می خواهیم آن را در این صفحه ملاقات جدید نیز داشته باشیم،
و بنابراین، البته،
ما همیشه می‌توانیم طرح‌بندی را در اطراف محتوای خود ببندیم
در صفحه meetup جدید برای اضافه کردن طرح بندی در اینجا نیز.
اما احتمالاً خواهید دید که این کار دست و پا گیر می شود،
برنامه ما صفحات بیشتری دارد.
اگر اپلیکیشنی با ده ها داشته باشیم
یا شاید صدها صفحه که طرح کلی ما را می‌پیچد
در اطراف تمام محتویات صفحه،
بنابراین وارد تمام اجزای صفحه می شوید تا سپس طرح بندی را بپیچید
پیرامون محتوایی که دست و پا گیر می شود،
و اکنون اینجاست که این فایل _app.js اهمیت پیدا می کند.
این یک فایل خاص است که وجود دارد
در این پوشه Pages خارج از جعبه
که در آن شما می توانید به تنهایی ایجاد کنید
اگر وجود نداشته باشد که در آن باید محتوایی داشته باشد
مثل این.
این نوعی جزء مسیر شماست.
این مؤلفه MyApp، که در آنجا تعریف شده است،
و این فقط یک مولفه واکنش معمولی در پایان است.
این جزء ویژه به عنوان جزء ریشه عمل می کند
NextJS رندر خواهد شد.
در اینجا props دریافت می کند و از ساختارزدایی شی استفاده می کند
برای بیرون کشیدن اطلاعات از لوازم
و اطلاعاتی که از آنجا بیرون می آورد،
یک پایه کامپوننت و یک پایه صفحه است.
این لوازم به این منتقل می شود
جزء MyApp به طور خودکار توسط NextJS،
زیرا NextJS چیزی است که از آن جزء خاص استفاده می کند.
و کامپوننت پایه ای است که صفحه واقعی را نگه می دارد
مطالبی که باید ارائه شوند
بنابراین متفاوت خواهد بود
هر زمان که صفحه ای را جابجا می کنیم و لوازم صفحه دارای ویژگی های خاصی هستند
صفحات ما ممکن است دریافت شوند،
و در حال حاضر صفحات ما دریافت نمی شوند
اصلاً هر وسیله ای،
چون در حال حاضر هیچ منبعی نداریم
که چنین وسایلی را فراهم می کند
اما این چیزی است که ما می خواهیم تغییر دهیم.
اما با آن، ما اکنون آن مؤلفه را در اینجا می دانیم
در این فایل _app.js در پایان خواهد شد
محتوای واقعی صفحه صفحات مختلف ما باشد.
و هر زمان که ما پیمایش کنیم تغییر خواهد کرد
از صفحه A تا صفحه B
حالا چون اینطور است
ما می توانیم از این فایل _app.js استفاده کنیم
و به سادگی این جزء را در اینجا بپیچید
با طرح ما یا با هر بسته بندی که دارید.
و ما مجبور نیستیم آن را انجام دهیم
داخل فایل های صفحه مختلف ما
بنابراین ما می‌توانیم پوشش طرح‌بندی را حذف کنیم
از index.js اینجا از صفحه اصلی ما،
ما می توانیم آن را حذف کنیم و به عقب برگردیم
فقط برای برگرداندن لیست ملاقات
و واردات طرح را در اینجا حذف کنید
و در عوض به _app.js بروید،
و سپس در اینجا، طرح بندی را وارد می کنیم
از غواصی یک سطح بالا به اجزا،
layout و سپس اشاره به فایل layout.
و اکنون این جزء را در اینجا می پیچیم
با جزء طرح.
و این بدان معنی است که مطالب مختلف صفحه ما
با این مؤلفه طرح بندی پیچیده می شود.
و از این رو، اگر اکنون همه فایل ها را ذخیره کنیم
با تمام آن تغییرات، اکنون در صفحه جدید ملاقات،
ما همچنین این طرح را اعمال کردیم.
ما نوار ناوبری را دریافت کردیم،
ما یک ظاهر طراحی اضافی دریافت کردیم که تضمین می کند
که محتوای صفحه کل عرض را نمی گیرد.
و از این رو اکنون در تمام صفحات،
ما این طرح را دریافت کردیم و نیازی به پیچیدن آن نیست
در اطراف محتویات مختلف صفحه در داخل
از فایل های مختلف صفحه
و البته این راه است،
رویکرد قابل نگهداری تر و راحت تر
استفاده از اجزای عمومی در برنامه ما.
بنابراین هر زمان که شما یک جزء داشته باشید
یا تنظیماتی که بر تمام صفحات شما تأثیر می گذارد
می توانید از این فایل _app.js برای اضافه کردن آسان استفاده کنید
که بدون فرو رفتن در ده ها فایل به صورت جداگانه.